<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<div *ngIf="selectedHoliday">
  
  <div class="myText">
    <h2>{{selectedHoliday.fields.username}} 审批</h2>
  </div>
  
  <div class="mx-auto" style="width: 30ch;">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <label class="input-group-text" for="inputGroupSelect01">进行审批</label>
      </div>
      <select class="custom-select" #flag id="inputGroupSelect01">
        <option selected>请选择...</option>
        <option value="通过">通过</option>
        <option value="不通过">不通过</option>
      </select>
    </div>
  </div>
  
  <div class="mx-auto" style="width: 60ch;">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">经理意见</span>
      </div>
      <textarea class="form-control" aria-label="With textarea" #reason></textarea>
    </div>
  </div>
<!-- 
  <br />

  <div class="mx-auto" style="width: 60ch;">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">副总经理意见</span>
      </div>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
  </div>

  <br />

  <div class="mx-auto" style="width: 60ch;">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">总经理意见</span>
      </div>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
  </div>

  <br /> -->

  <div class="myText">
    <button type="button" (click)="managePatchHolidays(flag.value, reason.value)" class="btn btn-primary">确认提交</button>
  </div>
</div>


<br />
<h2 class="smallTitle">员工请假记录</h2>
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">记录编号</th>
      <th scope="col">员工ID</th>
      <th scope="col">请假时间</th>
      <th scope="col">类型</th>
      <th scope="col">原因</th>
      <th scope="col">状态</th>
    </tr>
  </thead>
  <tbody *ngFor="let holiday of holidays" 
    [class.selected]="holiday === selectedHoliday" 
    (click)="onSelect(holiday)">
    <tr>
      <th scope="row">{{holiday.pk}}</th>
      <td>{{holiday.fields.username}}</td>
      <td>{{holiday.fields.beginTime}} - {{holiday.fields.endTime}}</td>
      <td>{{holiday.fields.category}}</td>
      <td>{{holiday.fields.reason}}</td>
      <td>{{holiday.fields.status}}</td>
    </tr>
  </tbody>
</table>

